﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table 组件综合演示 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.10.1/dist/css/layui.css" rel="stylesheet">
    <style>
        .layui-form-item {
            display: inline-block;
            margin-right: 10px; /* 元素间的间距，可按需调整 */
            vertical-align: middle; /* 垂直居中对齐 */
        }
    </style>
</head>
<body>
    <div style="padding: 20px;">
        <table class="layui-hide" id="test" lay-filter="test"></table>
    </div>


    <!-- 新增的最后一列操作按钮模板 -->
    <script type="text/html" id="operateTemplate">
        @* <a class="layui-btn layui-btn-xs" lay-event="update">修改</a> *@
         <a class="layui-btn layui-btn-xs" lay-event="approve">审批</a>
           <a class="layui-btn layui-btn-xs" lay-event="edit" data-id="{{d.notice_id}}">编辑</a>
    </script>
    <!-- 修改表单模板 -->
    <script type="text/html" id="updateFormTemplate">
        <form class="layui-form" lay-filter="updateForm">
            <!-- 新增隐藏字段存储 notice_id -->
            <input type="hidden" name="notice_id" id="notice_id">

            <div class="layui-row">
                <div class="layui-col-md-6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">客户名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="customer_name" lay-verify="required" placeholder="请输入客户名称" class="layui-input">
                        </div>
                    </div>
                     <div class="layui-form-item">
                        <label class="layui-form-label">单据编码</label>
                        <div class="layui-input-block">
                            <input type="text" name="document_code" lay-verify="required" placeholder="请输入单据编码" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-row">
                <div class="layui-col-md-6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">单据日期</label>
                        <div class="layui-input-block">
                            <input type="text" name="document_date" lay-verify="required" placeholder="请输入单据日期" class="layui-input">
                        </div>
                    </div>
                </div>            
            </div>

            <div class="layui-row">
                <div class="layui-col-md-6">
                    <div class="layui-form-item">
                        <label class="layui-form-label">单据状态</label>
                        <div class="layui-input-block">
                            <input type="text" name="document_status" lay-verify="required" placeholder="请输入单据状态" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>

            

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="submitUpdateForm">提交修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>

        </form>
    </script>



    <!-- 工具栏模板（包含添加按钮） -->
    <script type="text/html" id="toolbarDemo">
              <!--条件查询-->
        <form class="layui-form layui-row layui-col-space16" id="searchForm" lay-filter="searchFormFilter">
            <div class="layui-col-sm3">
                <div class="layui-form-item">
                    <label class="layui-form-label" >单据编码</label>
                    <div class="layui-input-block">
                        <input type="text" name="document_code" placeholder="请输入单据编码" class="layui-input">
                    </div>
                </div>              
            </div>
         
             <div class="layui-col-sm3">
             <div class="layui-form-item">
                    <label class="layui-form-label" >客户名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="customer_name" placeholder="请输入客户名称" class="layui-input">
                    </div>
                </div>
             </div>
            
            <div class="layui-btn-container layui-col-xs12">
                <button class="layui-btn" lay-submit lay-filter="searchSubmit">查询</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>

        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getData">获取当前页数据</button>
            <button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="addinvoiceOrder">最新新增</button>
            <button class="layui-btn layui-btn-sm layui-bg-blue" id="reloadTest">
                重载测试
                <i class="layui-icon layui-icon-down layui-font-12"></i>
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-primary" id="rowMode">
                <span>{{= d.lineStyle ? '多行' : '单行' }}模式</span>
                <i class="layui-icon layui-icon-down layui-font-12"></i>
            </button>
        </div>
    </script>




    <!-- 单元格操作模板 -->
    <script type="text/html" id="toolDemo">
        <div class="layui-clear-space">

            <a class="layui-btn layui-btn-xs" lay-event="more">
                更多
                <i class="layui-icon layui-icon-down"></i>
            </a>
        </div>
    </script>

    <script src="//unpkg.com/layui@2.10.1/dist/layui.js"></script>
    <script>
        layui.use(['table', 'dropdown', 'layer', 'form', 'jquery'], function () {
            var table = layui.table;
            var dropdown = layui.dropdown;
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;


            var tableIns;
            //退货通知单的列表显示
            function initTable() {
                tableIns = table.render({
                    elem: '#test',
                    layFilter: 'correctFilter',
                    // url: 'http://localhost:5234/api/Sales/Getreturn_notice_mainALL',
                    url: "@ViewBag.BaseUrl/T7/Sales/Getreturn_notice_mainALL",
                    toolbar: '#toolbarDemo',
                    page: true,
                    request: {
                        pageName: 'PageIndex', // 对应后端分页参数名 PageIndex
                        limitName: 'PageSize'  // 对应后端分页参数名 PageSize
                    },
                    // 修正 where 中错误的 DOM 选择器（假设表单字段名正确）
                    where: {
                        // 假设表单中物料编码字段名是 DepartName（根据实际表单字段修正）
                        document_code: $('[name="document_code"]').val(),
                        customer_name: $('[name="customer_name"]').val(),
                    },
                    limit: 15,
                    limits: [2, 3, 4, 5],
                    defaultToolbar: ['filter', 'exports', 'print', {
                        title: '提示',
                        layEvent: 'LAYTABLE_TIPS',
                        icon: 'layui-icon-tips',
                        onClick: function () {
                            layer.alert('自定义工具栏图标按钮');
                        }
                    }],
                    height: 'full-35',
                    css: ['.layui-table-tool-temp{padding-right: 145px;}'].join(''),
                    cellMinWidth: 80,
                    totalRow: true,
                    cols: [[
                        { type: 'checkbox', fixed: 'left' },
                        { field: 'notice_id', title: '序号', width: 100, sort: true },
                        {
                            field: 'document_code',
                            title: '单据编码',
                            width: 180,
                            templet: function (d) {
                                return `<a href="return_notice?document_code=${d.document_code}" target="_blank">${d.document_code}</a>`;
                                // 替换 /return_notice 为实际查询页面路径，target="_blank" 控制新标签页打开
                            }
                        },
                        { field: 'document_status', title: '单据状态', width: 120 },
                        { field: 'customer_name', title: '客户名称', width: 180 },
                        { field: 'materialsName', title: '物料名称', width: 120 },
                        { field: 'materialsCode', title: '物料编码', width: 100 },
                        { field: 'batch', title: '批号', width: 100 },
                        { field: 'document_date', title: '单据日期', width: 100 },
                        { field: 'shenPiStatus', title: '审批状态', width: 100 },
                        {
                            field: 'calulateNumber',
                            title: '退货数量',
                            width: 100,
                            templet: function (d) {
                                return (typeof d.calulateNumber === 'number') ? d.calulateNumber.toFixed(2) : '0.00';
                            }
                        },
                        {
                            field: 'outBoundNumber',
                            title: '入库数量',
                            width: 100,
                            templet: function (d) {
                                return (typeof d.outBoundNumber === 'number') ? d.outBoundNumber.toFixed(2) : '0.00';
                            }
                        },
                        { title: '操作', toolbar: '#operateTemplate', width: 150 }
                    ]],

                    error: function (res, msg) {
                        console.error('表格加载失败:', res, msg);
                    }
                });
            }
            initTable();

            // 条件查询逻辑
            form.on('submit(searchSubmit)', function (data) {
                console.log('发送的查询参数：', data.field);
                if (!tableIns) {
                    layer.msg('表格未初始化，请检查页面加载');
                    return false;
                }
                tableIns.reload({
                    where: data.field, // 传递查询参数
                    page: { curr: 1 }, // 重置到第一页
                    done: function (res, curr, count) {
                        if (res.data.length === 0) {
                            layer.msg('未查询到符合条件的数据', { icon: 2 });
                        }
                    }
                });
                return false;
            });


            // 工具栏事件处理
            table.on('toolbar(test)', function (obj) {
                switch (obj.event) {
                    case 'addData':
                        openAddDialog(); // 打开添加弹窗
                        break;
                    case 'getCheckData':
                        var checkStatus = table.checkStatus(obj.config.id);
                        var data = checkStatus.data;
                        layer.alert(layui.util.escape(JSON.stringify(data)));
                        break;
                    case 'getData':
                        var currentData = table.getData(obj.config.id);
                        layer.alert(layui.util.escape(JSON.stringify(currentData)));
                        break;
                    case 'addinvoiceOrder':
                        window.location.href = '@Url.Action("Addreturn_notice_main", "Sales")';
                        break;
                }
            });

        




            // 监听行工具事件（修改）
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                // if (obj.event === 'update') {
                //     // 打开修改弹窗
                //     layer.open({
                //         type: 1,
                //         title: '修改开票通知单信息',
                //         content: $('#updateFormTemplate').html(),
                //         area: ['600px', '600px'],
                //         success: function (layero, index) {
                //             // 填充表单数据
                //             form.val('updateForm', data);
                //             // 设置隐藏字段的值
                //             layero.find('#notice_id').val(data.notice_id);
                //         },
                //         yes: function (index, layero) {
                //             // 模拟提交表单
                //             layero.find('form').find('button[lay-filter="submitUpdateForm"]').click();
                //         }
                //     });
                // }
                 if (obj.event === 'approve') {
                    // 审批操作
                    layer.confirm('确定要进行审批操作吗？', function (index) {
                        $.ajax({
                            // url: 'http:localhost:5090/api/Sales/Udpreturn_notice_mainStatus',
                            url: "@ViewBag.BaseUrl/T8/Sales/Udpreturn_notice_mainStatus",
                            type: 'put',
                            headers: {
                                'Content-Type': 'application/json'
                            },
                            data: JSON.stringify({ notice_id: data.notice_id }),
                            success: function (res) {
                                if (res.code === 206) {
                                    layer.msg('审批成功', { icon: 1 });
                                    table.reload('test'); // 刷新表格
                                } else {
                                    layer.msg('审批失败: ' + res.message, { icon: 2 });
                                }
                            },
                            error: function (xhr) {
                                layer.msg('网络请求失败: ' + xhr.status, { icon: 2 });
                                console.error('AJAX 请求失败:', xhr.responseText);
                            }
                        });
                        layer.close(index);
                    });
                }
                else if (obj.event === 'edit') {
                    // 获取当前行ID
                    var id = data.notice_id;

                    // 跳转到编辑页面并传递ID
                    window.location.href = '@Url.Action("Udpreturn_notice_main", "Sales")?id=' + id;
                }
            });

            // 监听表单提交事件（修改）
            // form.on('submit(submitUpdateForm)', function (data) {
            //     var formData = data.field;
            //     // 重组字段，确保前端发送键名与后端接收键名完全匹配
            //     const requestData = {
            //         customer_name: formData.customer_name,
            //         document_code: formData.document_code,
            //         document_date: formData.document_date,
            //         document_status: formData.document_status,
            //         // 将notice_id转换为数值类型
            //         notice_id: Number(formData.notice_id)
            //     };
            //     $.ajax({
            //         url: 'http://localhost:5090/api/Sales/Udpreturn_notice_main',
            //         type: 'PUT',
            //         data: JSON.stringify(requestData),
            //         contentType: 'application/json',
            //         success: function (res) {
            //             if (res.code === 206) {
            //                 layer.msg('修改成功', { icon: 1 });
            //                 layer.closeAll(); // 关闭所有弹窗
            //                 table.reload('test'); // 刷新表格
            //             } else {
            //                 layer.msg('修改失败: ' + res.message, { icon: 2 });
            //             }
            //         },
            //         error: function (xhr) {
            //             layer.msg('网络请求失败: ' + xhr.status, { icon: 2 });
            //             console.error('AJAX 请求失败:', xhr.responseText);
            //         }
            //     });

            //     return false; // 阻止表单默认提交
            // });








            // 单据编码生成函数





            function generateDocumentCode() {
                const prefix = 'DP-'; // 前缀
                const timestamp = new Date().getTime(); // 时间戳
                const randomNum = Math.floor(Math.random() * 9000 + 1000); // 4位随机数
                return `${prefix}${timestamp}${randomNum}`;
            }



            // 下拉按钮、重载测试等原有功能代码（保持不变）
            // ...（原有dropdown相关代码可根据需要保留）
            // 重载测试
            dropdown.render({
                elem: '#reloadTest', // 可绑定在任意元素中，此处以上述按钮为例
                data: [{
                    id: 'reload',
                    title: '重载'
                }, {
                    id: 'reload-deep',
                    title: '重载 - 参数叠加'
                }, {
                    id: 'reloadData',
                    title: '仅重载数据'
                }, {
                    id: 'reloadData-deep',
                    title: '仅重载数据 - 参数叠加'
                }],
                // 菜单被点击的事件
                click: function (obj) {
                    switch (obj.id) {
                        case 'reload':
                            // 重载 - 默认（参数重置）
                            table.reload('test', {
                                where: {
                                    abc: '123456',
                                    //test: '新的 test2',
                                    //token: '新的 token2'
                                },

                            });
                            break;
                        case 'reload-deep':
                            // 重载 - 深度（参数叠加）
                            table.reload('test', {
                                where: {
                                    abc: 123,
                                    test: '新的 test1'
                                },
                                //defaultToolbar: ['print'], // 重载头部工具栏右侧图标
                                //cols: ins1.config.cols
                            }, true);
                            break;
                        case 'reloadData':
                            // 数据重载 - 参数重置
                            table.reloadData('test', {
                                where: {
                                    abc: '123456',
                                    //test: '新的 test2',
                                    //token: '新的 token2'
                                },
                                scrollPos: 'fixed',  // 保持滚动条位置不变 - v2.7.3 新增
                                height: 2000, // 测试无效参数（即与数据无关的参数设置无效，此处以 height 设置无效为例）
                                //url: '404',
                                //page: {curr: 1, limit: 30} // 重新指向分页
                            });
                            break;
                        case 'reloadData-deep':
                            // 数据重载 - 参数叠加
                            table.reloadData('test', {
                                where: {
                                    abc: 123,
                                    test: '新的 test1'
                                }
                            }, true);
                            break;
                    }
                    layer.msg('可观察 Network 请求参数的变化');
                }
            });

            // 行模式
            dropdown.render({
                elem: '#rowMode',
                data: [{
                    id: 'default-row',
                    title: '单行模式（默认）'
                }, {
                    id: 'multi-row',
                    title: '多行模式'
                }],
                // 菜单被点击的事件
                click: function (obj) {
                    var checkStatus = table.checkStatus(id)
                    var data = checkStatus.data; // 获取选中的数据
                    switch (obj.id) {
                        case 'default-row':
                            table.reload('test', {
                                lineStyle: null // 恢复单行
                            });
                            layer.msg('已设为单行');
                            break;
                        case 'multi-row':
                            table.reload('test', {
                                // 设置行样式，此处以设置多行高度为例。若为单行，则没必要设置改参数 - 注：v2.7.0 新增
                                lineStyle: 'height: 95px;'
                            });
                            layer.msg('即通过设置 lineStyle 参数可开启多行');
                            break;
                    }
                }
            });
        });




    </script>
</body>
</html>